<!--
 * @Descripttion: 地图新建组件
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-18 16:51:22
 * @LastEditors: daipeng
 * @LastEditTime: 2020-11-19 12:23:57
-->
<template>
    <div>
        <div id="container"></div>
        <div class="input-card" style='width:28rem;'>
            <label style='color:grey'>根据地址获取经纬度坐标</label>
            <div class="input-item">
                    <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
                    <input id='address' type="text" v-model='area' >
            </div>
            <div class="input-item">
                    <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
                    <input id='lnglat' disabled type="text"  :value="reversedMessage">
            </div>
            <div class="wrap_btn">
                <input type="button" class="btn" value="地址转经纬度" @click="geoCode()" />
                <input type="button" class="btn" value="确定" @click="close()" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            area: '北京市海淀区西二旗桥',
            geocoder: '',
            marker: '',
            infoWindow: '',
            lng: '',//经度
            lat: ''//纬度
        };
    },
    props: {
        areas: {
            type: String,
            default: ''
        },
    }, //props接收
    watch: {
        areas(newName, oldName) {
			this.area = newName;
        },
    },
    computed: {
        reversedMessage: function () {
            if(this.lng!=''&&this.lat!=''){
                return this.lng+','+this.lat
            }
        }
    },
    created() {

    },
    mounted() {
        this.map = new AMap.Map("container", {
            resizeEnable: true
        });
        
        this.geocoder = new AMap.Geocoder({
            city: "010", //城市设为北京，默认：“全国”
        });
        
        this.marker = new AMap.Marker();
        var that = this;
        this.map.on('click', function(e) {
            that.lng = e.lnglat.getLng();
            that.lat = e.lnglat.getLat();
        });

        this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});


        this.geoCode();
    },
    methods: {
        geoCode() {
            var address  = this.area;
            var markers = this.marker;
            var maps = this.map;
            var that = this;
            this.geocoder.getLocation(address, function(status, result) {
                if (status === 'complete'&&result.geocodes.length) {
                    var lnglat = result.geocodes[0].location;
                    console.log(lnglat.lng);
                    console.log(lnglat.lat);
                    that.lng = lnglat.lng;
                    that.lat = lnglat.lat;
                    markers.setPosition(lnglat);
                    maps.add(markers);
                    maps.setFitView(markers);
                }else{
                    log.error('根据地址查询位置失败');
                }
            });

            var lnglats = [
                [116.368904, 39.923423, "店铺一"],
                [116.382122, 39.921176, "店铺二"],
                [116.387271, 39.922501, "店铺三"],
                [116.398258, 39.914600, "店铺四"]
            ];
            for (var i = 0, marker; i < lnglats.length; i++) {
                var marker = new AMap.Marker({
                    position: lnglats[i],
                    map: maps,
                    icon:new AMap.Icon({            
                        image: 'http://127.0.0.1:8333/static/favicon.ico',
                        size: new AMap.Size(30, 28),  //图标所处区域大小
                        imageSize: new AMap.Size(30,28) //图标大小
                    }), 
                });
                marker.content = lnglats[i][2] + '：的信息';
                marker.on('click', markerClick);
            }

            function markerClick(e) {
                this.infoWindow.setContent(e.target.content);
                this.infoWindow.open(maps, e.target.getPosition());
            }
            maps.setFitView(marker);
        },
        close(){
            this.$emit("pagedata", [this.lng, this.lat, this.area]);
        }
    },
};
</script>

<style scoped>
@import '../../assets/css/areapicking.css';
#container {
    width: 100%;
    height: 400px;
}

.wrap_btn{
    display: flex;
}

.wrap_btn .btn{
    flex: 1;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Areapickingedit.vue